<template>
  <div class="white-box">
    <div class="task-one">
      <div class="task-one__item">
        <span class="task-one__label">变动类型：</span>
        <el-select v-model="searchParams.type" placeholder="请选择变动类型" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.type"
                     :key="index"/>
        </el-select>
      </div>
<!--      <div class="task-one__item">-->
<!--        <span class="task-one__label">积分状态：</span>-->
<!--        <el-select v-model="searchParams.pointsStatus" placeholder="请选择积分状态" clearable>-->
<!--          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.pointsStatus"-->
<!--                     :key="index"/>-->
<!--        </el-select>-->
<!--      </div>-->
      <div class="task-one__btn">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search"
                   @click="handleSearch">搜索</el-button>
        <el-button type="success" :loading="importDataBtnLoading" @click="importData('points/export-list-points')"
                   :icon="Download">导出</el-button>
      </div>
    </div>
    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }" :height="userSid?420:'auto'"
              element-loading-background="rgba(255, 255, 255, 0.6)" row-key="sid" @select="handleSelected" @select-all="handleAllSelected">
<!--      <el-table-column type="selection" width="55" />-->
<!--      <el-table-column prop="code" label="编号"></el-table-column>-->
      <el-table-column prop="orderCode" label="订单编号"></el-table-column>
      <el-table-column prop="phone" label="转出人"></el-table-column>
      <el-table-column prop="payPhone" label="收积分人"></el-table-column>
      <el-table-column prop="pointsStatus" label="积分状态" width="120" align="center">
        <template #default="{ row }">
          <!--积分状态：0=后台变更,1=佣金转积分,2=转入,3=转出,4=积分支付-->
          <el-tag type="primary" v-if="row.pointsStatus === 0">后台变更</el-tag>
          <el-tag type="success" v-if="row.pointsStatus === 1">佣金转积分</el-tag>
          <el-tag type="success" v-if="row.pointsStatus === 2">转入</el-tag>
          <el-tag type="warning" v-if="row.pointsStatus === 3">转出</el-tag>
          <el-tag type="danger" v-if="row.pointsStatus === 4">积分支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="total" align="center" label="此次变动">
        <template #default="{ row }">
          <el-text v-if="row.type === 0" type="success" tag="b">+ {{row.total}}</el-text>
          <el-text v-else-if="row.type === 1" type="danger" tag="b">- {{row.total}}</el-text>
          <el-text v-else type="info"></el-text>
        </template>
      </el-table-column>
      <el-table-column prop="beforePoints" label="变动前积分"></el-table-column>
      <el-table-column prop="afterPoints" label="变动后积分"></el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
      <el-table-column prop="created" label="创建时间" width="160"> </el-table-column>
    </el-table>

    <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeNum"
        :total="totalNums"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <go-back/>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus, Download, Search
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"


const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  handleSelected,
  selectedIds,
  submitDialogForm,
  closeDialog,
  handleAction,
  handleDelete,
  sortFieldName,
  importData,
  importDataBtnLoading
} = listMixins()

const props = defineProps({
  userSid: {
    type: String,
    default: '',
  },
})

apiPath.value = '/points/all';
if(props.userSid){
  searchParams.userSid = props.userSid
}
// sortFieldName.value = 'createdMilli'
const selectOptions = reactive({
  type:[
    {label:'增加',value:0},
    {label:'减少',value:1},
  ],
  pointsStatus:[
    {label:'后台变更',value:0},
    {label:'佣金转积分',value:1},
    {label:'转入',value:2},
    {label:'转出',value:3},
    {label:'积分支付',value:4},
  ]
})

onMounted(() => {
  getData()
})

const fleshData = () =>{
  getData()
}
defineExpose({
  fleshData
})

</script>

<style lang="less">

</style>